<template>
  <div class="goods-container">
    <div class="list">
      <ul>
        <li v-for="item in goods" :key="item.name"><a :href="item.name | nameFormat">{{
            item.name }}</a></li>
      </ul>
    </div>

    <div class="info">
      <!-- <div>
        <h1>皮蛋XXXXXXX</h1>
      <div class="goods">
        <img src="http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114" alt="">
        <div class="msg">
          <div class="title">皮蛋</div>
          <div class="description">咸粥</div>
          <div class="sellCount">
            <span>月售卖100</span>
            <span>好评率100%</span>
          </div>
          <div class="price"><span class="now1">￥</span><span class="now2">24</span><span class="old"
              >￥28</span></div>
        </div>
      </div>
     </div> -->
      <!-- $store 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用 this 访问原型上的属性，template 拥有组件实例的上下文，可直接通过 {{ $store.state.userName }} 访问，等价于 script 中的 this.$store.state.userName。 -->

      <div v-for="item in goods" :key="item.name">
        <h1 :id="item.name">{{ item.name }}</h1>
        <div class="goods" v-for="item2 in item.foods" :key="item2.name" @click="goodsInfos(item.name,item2.name)">
          <img :src="item2.icon" alt="">
          <div class="msg">
            <div class="title">{{ item2.name }}</div>
            <div class="description" v-if="item2.description">{{ item2.description }}</div>
            <div v-else class="box"></div>
            <div class="sellCount">
              <span>月售卖{{ item2.sellCount }}单</span>
              <span>好评率{{ item2.rating }}%</span>
            </div>
            <div class="price"><span class="now1">￥</span><span class="now2">{{ item2.price }}</span><span class="old"
                v-if="item2.oldPrice">￥{{ item2.oldPrice }}</span>
              <div class="add"><span class="icon-remove_circle_outline" v-show="$store.state.isAdd.includes(item2.name)"
                  @click.stop="remove(item2.name)"></span><span class="addnum" v-show="$store.state.isAdd.includes(item2.name)"
                  ref="aa">{{ $store.getters.showNumByName(item2.name) }}</span><span class="icon-add_circle"
                  @click.stop="add(item2.price, item2.name, item.name)" :id="item2.name + item.name"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="detail_fade">
      <detailview class="detail" v-show="detail" :catemsg="cate_info" :goodsmsg="goods_info" @goodsfunc="closeDetailView"></detailview>
    </transition>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag"></div>
    </transition>
  </div>
</template>

<script>
import detailview from '../views/DetailView.vue'
const ERR_OK = 0
export default {
  name: 'GoodsView',
  data () {
    return {
      goods: [],
      detail: false,
      cate_info: '',
      goods_info: '',
      ballFlag: false,
      start: {},
      end: {}
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$http.get('http://localhost:8081/api/goods').then(res => {
        // console.log(res.body.errno)
        // 异步请求数据，渲染界面要先v-if判断是否有数据嘞
        if (res.body.errno !== ERR_OK) return
        this.goods = res.body.data
      })
    },
    goodsInfos (name1, name2) {
      // console.log(name1)
      // console.log(name2)
      this.cate_info = name1
      this.goods_info = name2
      this.detail = true
    },
    closeDetailView () {
      this.detail = false
      this.cate_info = ''
      this.goods_info = ''
    },
    add (price, name, cate) {
      this.$store.commit('add', {
        price,
        name
      })
      // console.log(this.$store.state.isAdd)

      // 这里用refs不大合适，遍历会生成一个 refs 数组，还要筛选不方便 ，这里改用 id 一一对应
      // 起点设置在加号，如果设置在中间数字，数字一开始是display：none （0,0），异步方式，不合理。
      // 因为同样的name会重复出现不具备唯一性，这里用 name + cate 来体现唯一性 （食物名字+分类）
      const startPosition = document.getElementById(name + cate).getBoundingClientRect()
      const xStart = startPosition.left
      const yStart = startPosition.top
      this.start = {
        xStart,
        yStart
      }

      // console.log(startPosition)
      // console.log(xStart)
      // console.log(yStart)

      const badgePosition = document.getElementById('badge').getBoundingClientRect()
      const xEnd = badgePosition.right
      const yEnd = badgePosition.top
      // console.log(xEnd)
      // console.log(yEnd)
      this.end = {
        xEnd,
        yEnd
      }
      // console.log(this.end)

      this.ballFlag = true
    },
    remove (name) {
      this.$store.commit('remove', name)
    },
    beforeEnter (el) {
      el.style.transform =
          `translate(${this.start.xStart}px, ${this.start.yStart}px)`
    },
    enter (el, done) {
      // eslint-disable-next-line
      el.offsetWidth
      // console.log('相对于ball(0,0)的xEnd:' + this.end.xEnd)
      // console.log('相对于ball(0,0)的yEnd:' + this.end.yEnd)
      el.style.transform = `translate(${this.end.xEnd}px, ${this.end.yEnd}px)`
      el.style.transition = 'all .5s cubic-bezier(.1, .67, .83, .67)'
      done()
    },
    afterEnter (el) {
      this.ballFlag = false
    }
  },
  components: {
    detailview
  },
  filters: {
    nameFormat (name) {
      return '#' + name
    }
  }
}

</script>

<style lang="scss" scoped>
  .goods-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;

    .ball {
      // fixed相对于屏幕，因为用getBoundingClientRect()也是相对于屏幕
      position: fixed;
      top: 0;
      left: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      z-index: 99;
    }

    .list {
      flex: 1.6;
      height: 100%;
      overflow: scroll;

      ul {
        width: 100%;
        height: 100%;

        li {
          width: 100%;
          border-bottom: 1px solid rgba(7, 17, 27, .1);
          background-color: #f3f5f7;

          a {
            display: block;
            height: 1.08rem;
            width: 100%;
            font-size: 0.28rem;
            color: #666;
            line-height: 1.08rem;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            // .active {
            //   background-color: #fff;
            // }
          }

          a:hover {
            background-color: #fff;
          }

        }

        // li:active {
        //   color: #333;
        //   background-color: #fff;
        // }
      }
    }

    .info {
      flex: 5.9;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: scroll;

      h1 {
        padding-left: 0.28rem;
        line-height: 0.52rem;
        font-size: 0.24rem;
        font-weight: normal;
        color: rgb(147, 153, 159);
        border-left: 5px solid #d9dde1;
        background-color: #f3f5f7;
      }

      .goods {
        padding: 0.36rem;
        width: 100%;
        display: flex;
        // align-items: center;
        border-bottom: 1px solid rgba(7, 17, 27, .1);

        img {
          width: 1.14rem;
          height: 1.14rem;
        }

        .msg {
          width: 4rem;
          padding-left: 0.2rem;

          .title {
            font-size: 0.28rem;
            color: rgb(7, 17, 27);
            line-height: 0.32rem;
          }

          .description,
          .sellCount {
            font-size: 0.2rem;
            color: rgb(147, 153, 159);
            line-height: 0.32rem;
          }

          .description {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .box {
            height: 0.32rem;
          }

          .price {
            color: rgb(147, 153, 159);
            font-size: 0.2rem;
            font-weight: normal;
            position: relative;

            .now1 {
              color: rgb(240, 20, 20);
            }

            .now2 {
              font-size: 0.28rem;
              color: rgb(240, 20, 20);
              font-weight: 700;
              line-height: 0.48rem;
            }

            .old {
              padding-left: 0.16rem;
              text-decoration: line-through;
            }

            .add {
              position: absolute;
              top: 7px;
              right: 0;
              height: 120%;
              text-align: center;
              color: rgb(0, 160, 220);
              font-size: 0.5rem;

              .addnum {
                display: inline-block;
                width: 1rem;
                color: #666;
              }
            }
          }
        }
      }
    }

    .detail_fade-enter-active {
      transition: all .5s ease;
    }

    .detail_fade-leave-active {
      transition: all .2s ease;
    }

    .detail_fade-enter {
      opacity: 0;
    }

    .detail_fade-leave-to {
      opacity: 0;
      transform: translateX(-200px)
    }

    .detail {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

</style>
